<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>小米首頁</title>
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/header.css">
	<link rel="stylesheet" href="./css/footer.css">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./css/font/iconfont.css">

</head>

<body>
	<!-- 设置头部 可通用 -->

	<div id="header"></div>
	<!-- 设置nav 轮播图导航 -->
	<div class="xiao_nav">
		<div id="nav" class="container">
			<!-- nav上部 -->
			<div id="nav_main">
				<!-- 轮播图 -->
				<ul class="banner_img">
					<!-- 
					<li><a href="#"><img src="./img/index/xmad_15084688880977_tjRVO.jpg"></a></li>
				 -->
				</ul>
			</div>
			<!-- 2个小倒角图 -->
			<a href="#" class=" bt1 bta xiaomi-arrows-copy-copy-copy" data-move="left"></a>
			<a href="#" class=" bt2 bta xiaomi-arrows-copy-copy-copy" data-move="right"></a>
			<!-- 5个小圆圈 -->
			<ul class="point">
				<!-- <li><a href="#"></a></li> -->
			</ul>

			<!--导航列表，相对定位  -->
			<ul id="nav_lf">
				<li>
					<a href="#">手机 电话卡</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">笔记本</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">电视 盒子</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">路由器 智能硬件</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">移动电源 电池 插线板</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">耳机 音箱</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">保护膜 贴膜</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">线材 支架 存储卡</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">箱包 服饰 鞋 眼镜</a>
					<span class="xiaomi-i"></span>
				</li>
				<li>
					<a href="#">米兔 生活周边</a>
					<span class="xiaomi-i"></span>
				</li>
			</ul>
			<!-- 事件的相对定位 -->
			<div id="nav_box" class=" list_box1 ">
				<div class="nav_lf_list_box">
					<ul>
						<li class="list_text1">
							<a href="#"><img src="./img/index/minote.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mi4.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80pc-5x.png" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/max2_80.jpg" alt=""></a>
							<a class="names">小米5X </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80-5a.png" alt=""></a>
							<a class="names">小米MIX 2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/hmn4x80.png" alt=""></a>
							<a class="names">小米手机5</a>
							<a href="#" class="choose">选购</a>
						</li>
		
						<li class="list_text1">
							<a href="#"><img src="./img/index/minote.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mi4.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80pc-5x.png" alt=""></a>
							<a class="names">小米6</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/max2_80.jpg" alt=""></a>
							<a class="names">小米5X</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80-5a.png" alt=""></a>
							<a class="names">小米MIX 2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/hmn4x80.png" alt=""></a>
							<a class="names">小米手机5</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li class="list_text1">
							<a href="#"><img src="./img/index/minote.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80-5a.png" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80pc-5x.png" alt=""></a>
							<a class="names">小米6</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/max2_80.jpg" alt=""></a>
							<a class="names">小米5X</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/80-5a.png" alt=""></a>
							<a class="names">小米MIX 2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/hmn4x80.png" alt=""></a>
							<a class="names">小米手机5</a>
							<a href="#" class="choose">选购</a>
						</li>
					</ul>
				</div>
				<div class="nav_lf_list_box ">
					<ul>
						<li class="list_text1">
							<a href="#"><img src="./img/index/pms_1499138177.54329452!220x220.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li class="list_text1">
							<a href="#"><img src="./img/index/pms_1499138177.54329452!220x220.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li class="list_text1">
							<a href="#"><img src="./img/index/pms_1499138177.54329452!220x220.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/pms_1505106710.28498495!220x220.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/pms_1505106710.28498495!220x220.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/pms_1505106710.28498495!220x220.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/57ba6a38N4f4670bd.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/57ba6a38N4f4670bd.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/57ba6a38N4f4670bd.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/product_detail_2.png" alt=""></a>
							<a class="names">小米5X </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/product_detail_2.png" alt=""></a>
							<a class="names">小米5X </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/product_detail_2.png" alt=""></a>
							<a class="names">小米MIX 2</a>
							<a href="#" class="choose">选购</a>
						</li>
						
					</ul>
				</div>
				<div class="nav_lf_list_box ">
					<ul>
						<li class="list_text1">
							<a href="#"><img src="./img/index/mitv49!160x110.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li class="list_text1">
							<a href="#"><img src="./img/index/mitv49!160x110.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li class="list_text1">
							<a href="#"><img src="./img/index/mitv49!160x110.jpg" alt=""></a>
							<a class="names">小米note3</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3s_48.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3s_48.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3s_48.jpg" alt=""></a>
							<a class="names">小米MIX2</a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv55!160x110.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv55!160x110.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv55!160x110.jpg" alt=""></a>
							<a class="names">小米6  </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3_55.jpg" alt=""></a>
							<a class="names">小米5X </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3_55.jpg" alt=""></a>
							<a class="names">小米5X </a>
							<a href="#" class="choose">选购</a>
						</li>
						<li>
							<a href=""><img src="./img/index/mitv3_55.jpg" alt=""></a>
							<a class="names">小米MIX 2</a>
							<a href="#" class="choose">选购</a>
						</li>
						
					</ul>
				</div>
			</div>
			<!-- 导航底部 -->
			<div class="container" id="nav_bottom">
				<div>
					<ul class="nav_bottom_icon">
						<li class="icon1"><a href="#">选购手机</a></li>
						<li class="icon"><a href="#">企业团购</a></li>
						<li class="icon1"><a href="#">F码通道</a></li>
						<li><a href="#">米粉卡</a></li>
						<li class="icon"><a href="#">以旧换新</a></li>
						<li><a href="#">话费充值</a></li>
					</ul>
				</div>
				<div>
					<a href="#">
						<img src="./img/index/xmad_15082970588295_zXSbw.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="#">
					<img  src="./img/index/xmad_15067798057483_gquZc.jpg">
					</a>
				</div>
				<div>
					<a href="#">
						<img  src="./img/index/xmad_14998442103443_TgVEY.jpg" alt="">
					</a>
				</div>
			</div>
			<!-- 设置xm-plain-box 产品滚动 -->
			<div id="xm_box">
				<div class="container">
					<!-- 标题头 -->
					<div class="xm_box_top">
						<h1 class="lf">小米明星单品</h1>
						<p class="rt" id='bannerBtnGroup'>
							<a href="#" data-bt="left">&lt</a>
							<a href="#" data-bt="right">&gt</a>
						</p>
					</div>
					<!-- 产品box -->
					<div class="xm_box_bottom">
						<ul id="xm_box_detail">
							<li class="li1">
								<a href="#"><img src="img/index/xmad_15078617619273_gRwzn.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
							<li class="li2">
								<a href="#"><img src="img/index/6ef55907-bbed-49be-a2bb-be0821b5f7b8-.png" alt=""></a>
								<h4 class="title">小米手环 2</h4>
								<p class="desc">OLED 显示屏幕，升级计步算法</p>
								<p class="price">149元</p>
							</li>
							<li class="li3">
								<a href="#"><img src="img/index/T1ZYC_BjWv1RXrhCrK.jpg" alt=""></a>
								<h4 class="title">米家压力IH电饭煲</h4>
								<p class="desc">智能烹饪，压力IH加热技术</p>
								<p class="price">999元</p>
							</li>
							<li class="li4">
								<a href="#"><img src="img/index/xmad_14972549116226_tZpod.png" alt=""></a>
								<h4 class="title">米家空气净化器Pro</h4>
								<p class="desc">OLED显示屏幕，激光颗粒物传感器</p>
								<p class="price">1499元</p>
							</li>
							<li class="li5">
								<a href="#"><img src="img/index/de35852a-1be5-4ef5-846f-dcdd2efcfea6.png" alt=""></a>
								<h4 class="title">更快更强，不止四天线</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">149元</p>
							</li>
							<li class="li1">
								<a href="#"><img src="img/index/xmad_15058020926003_BfHtZ.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
							<li class="li2">
								<a href="#"><img src="img/index/xmad_1489401341687_vUojl.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
							<li class="li3">
								<a href="#"><img src="img/index/xmad_14966625747867_qcTyh.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
							<li class="li4">
								<a href="#"><img src="img/index/pms_1503909150.67293503!220x220.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
							<li class="li5">
								<a href="#"><img src="img/index/725a37e3-78b7-4298-8098-c40097bf179d-.png" alt=""></a>
								<h4 class="title">米家智能摄像机云台版</h4>
								<p class="desc">红外夜视，720P分辨率</p>
								<p class="price">199元</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- main主体部分 -->
	<div id="main">
		<div class="container">
			<div class="xm_main_top">
				<h2 class="main_top_title">家电</h2>
				<ul class="main_top_list">
					<li><a href="#">热门</a></li>
					<li><a href="#">电视影音</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">家居</a></li>
				</ul>
			</div>
			<!-- 弹性布局 -->
			<div class="xm_main" id="xm_floo1">
				<!--<ul class="xm_main_box" >
					 第一个产品
					 <li class="li_1">
						<a href="#"><img src="img/index/xmad_15021010132973_BOkcp.jpg" alt=""></a>
					</li>
					<!-- 第2~5个 -->
				<!-- <li>
						<a href="#" class="new_p">新品</a>
						<p>
						  <a href="#" class="pic"><img src="img/index/pms_1501057018.70015369!220x220.jpg" alt=""></a>
						</p>
						<a href="#" class="title">${小米AI音箱 p.title}</a>
						<p class="desc1">你指的拥有${p.desc1}</p>
						<span class="price">299元${p.price}</span>
						<div class="banner_msg">
							<a href="#">
								<span>一百个赞，让人出乎意料的是音质。性价比高！</span>
								<span class="title">来自于 比 的评价 </span>
							</a>
						</div>
					</li> -->


				<!--第6个  -->
				<!-- <li class="li_1">
					    <a href=""><img src="img/index/xmad_15076499921129_idgHC.jpg" alt=""></a>
					</li>
                    <!-- 第7-9 -->
				<!-- <li>
						<p>
							<a href="#" class="pic"><img src="img/index/pms_1501057018.70015369!220x220.jpg" alt=""></a>
						</p>
						<a href="#" class="title">小米AI音箱</a>
						<p class="desc">你指的拥有</p> -->
				<!-- <span class="price">299元</span>
					</li> -->

				<!--最后一个  -->
				<!-- <li class="box_last">
						<div>
							<p class="title">小米VR眼镜</p>
							<p class="price"><span>299</span>元</p>
							<div class="pic"><a href="#"><img src="img/index/pms_1477985364.89714934!220x220.jpg" alt=""></a></div>
						</div>
						<div>
							<p class="title">浏览更多</p>
							<p class="price">热门</p>
							<div class="pic"><a href="#"><img src="img/index/pms_1477985364.89714934!220x220.jpg" alt=""></a></div>		 -->
				<!-- </div>
					</li>  -->
				<!-- </div>	 -->
			</div>
		</div>
		<div class="container">
			<div class="xm_main_top">
				<h2 class="main_top_title">智能</h2>
				<ul class="main_top_list">
					<li><a href="#">热门</a></li>
					<li><a href="#">电视影音</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">家居</a></li>
				</ul>
			</div>
			<div class="xm_main" id="xm_floo2">
			</div>
		</div>
		<!-- 设置底部 -->
		<div id="footer">
		</div>
		<!-- <script src="./js/slideShow.js"></script>  -->
		<!-- 引用js文件 -->
		<script src="js/jquery-3.2.1.js"></script>
		<!-- <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script> -->
		<script src="js/ajax.js"></script>
		<script src="js/header.js"></script>
		<script src="js/index.js"></script>
		<script src="js/footer.js"></script>
</body>

</html>